<template>
  <el-dialog title="评价管理" :close-on-click-modal="false" :visible.sync="visible" fullscreen center>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="评价记录管理" name="first">
        <assess-record v-if="firstVisible" ref="firstDialog"></assess-record>
      </el-tab-pane>
      <el-tab-pane label="评价模板" name="second">
        <assess-template v-if="secondVisible" ref="secondDialog"></assess-template>
      </el-tab-pane>
			<el-tab-pane label="评价问题" name="third">
			  <assess-problem v-if="thirdVisible" ref="thirdDialog"></assess-problem>
			</el-tab-pane>
			<el-tab-pane label="评价类型" name="fourth">
			  <assess-type v-if="fourthVisible" ref="fourthDialog"></assess-type>
			</el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
  import AssessRecord from './AssessRecord'
  import AssessTemplate from './AssessTemplate'
  import AssessProblem from './AssessProblem'
  import AssessType from './AssessType'

  export default {
    data(){
      return {
        visible: false,
        firstVisible: false,
        secondVisible: false,
        thirdVisible: false,
        fourthVisible: false,
        activeName: 'first'
      }
    },
    components: {
      AssessRecord,
      AssessTemplate,
      AssessProblem,
      AssessType
    },
    methods:{
      init(){
        this.visible = true
        this.firstVisible = true
        this.$nextTick(() => {
          this.$refs['firstDialog'].init()
        })
      },
      handleClick(tabName){
        this[tabName.name + 'Visible'] = true
        this.$nextTick(() => {
          this.$refs[tabName.name + 'Dialog'].init()
        })
      }
    }
  }
</script>

<style>
</style>
